//-------------------------------------------///
//                  Basis                    ///
//-------------------------------------------///

@skin : "material";

//basic colors

@baseColor: #1CA1C1;
@accentColor: #55CD97;
@infoColor: #FDBF4C;
@dangerColor: #FF5C4C;
@backColor:#FFFFFF;	

@baseBg: #EBEDF0;
@accentBg: #F4F5F9;
@secondaryBg: #657584;
@secondaryAccentBg: #4A4E58;

@borderColor:#DADEE0;
@inputBorderColor:#CCD7E6;
@dataBorderColor:#EDEFF0;


@mainColor:@baseColor;
@alterColor:@accentBg;
@selectColor:@accentBg;
@foreColor: #666666;
@layoutColor: @accentBg;
@spaceLayoutColor: @baseBg;
@wideLayoutColor: @baseBg;


//-------------------------------------------///
//            Sync with skin.js              ///
//-------------------------------------------///

@barHeight: 44px;
@rowHeight: 36px;
@inputHeight: 38px;
@listItemHeight: 36px;
@unitHeaderHeight:36px;
@propertyItemHeight:28px;
@timelineItemHeight:46px;
@menuMargin: 0px;
@menuHeight: 36px;
@dataPadding: 12px;

//basic font

@font-face {
	font-family: Roboto;
	src: url('fonts/Roboto-Regular-webfont.woff2') format('woff2'),
		url('fonts/Roboto-Regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Roboto;
	src: url('fonts/Roboto-Medium-webfont.woff2') format('woff2'),
		url('fonts/Roboto-Medium-webfont.woff') format('woff');
	font-style:normal;
	font-weight:500;
}

@fontColor: #475466;
@altFontColor: #313131;
@inactiveFontColor: #94A1B3;

@fontSize: 14px;
@barFontSize: 16px;
@smallFontSize: 12px;
@fontFamily: Roboto, sans-serif;
@boldStyle:500;

.fontStyle(@size:14px, @weight:400, @color:@fontColor, @space:0.2px){
	font-family:@fontFamily;
	font-size:@size;
	font-weight:@weight;
	color:@color;
	letter-spacing:@space;
}

.mainFont{
	.fontStyle();
}

@buttonFontColor:@baseColor;
.buttonFont{
	.fontStyle(@barFontSize, 500, @buttonFontColor, 0px);
}
@barFontColor:@fontColor;
.barFont{
	.fontStyle(@barFontSize, 500, @barFontColor, 0px);
}

//hover, focus, active css
.darkActiveRule(@color){
	background-color: darken(@color,8%);
}
.darkFocusRule(@color){
	background-color: darken(@color,4%);
}
.darkHoverRule(@color){
	background-color: darken(@color,4%);
}
.darkHoverRuleA(){
	background-color: rgba(0,0,0,0.04);
}
.darkActiveRuleA(){
	background-color: rgba(0,0,0,0.05);
}
.radioHoverRule(@color){
	color:darken(@color,6%);
}
.selectFocusRule{
	background: darken(@selectColor, 2%);
}


//-------------------------------------------///
//                View, layout              ///
//-------------------------------------------///

//view, layout
@templatePadding: 4px 12px;
@lightBorderColor:	@dataBorderColor;

@layoutIcons: "corners";


.layoutBarFont(){
	.barFont();
	&.webix_dark{
		color:@darkBarFontColor;
	}
}

/*[L]*/ @darkerBG:darken(@backColor, 9);
/*[L]*/ @darkestBG:darken(@backColor, 24);

//-------------------------------------------------------//
//    Inverted bars (toolbar, type header, accordion)    //
//-------------------------------------------------------//

@darkBarFontColor: @backColor;
@barkBarInputColor: rgba(255,255,255, 0.7);
@darkBarPlaceholderColor: rgba(255,255,255, 0.4);

.layoutDarkBarBG(){
	@barButtonColor: @mainColor;
	@barButtonBgColor:rgba(0,0,0,0.2);
	@barButtonHoverColor:rgba(0,0,0,0.4);
	@barButtonActiveColor:rgba(0,0,0,0.5);

	.barButton(@fColor: @darkBarFontColor, @color: transparent, @shadowColor: darken(@mainColor,10%)){
		background-color:@barButtonBgColor;
		color: @fColor;
		border-color:@color;
	}
	.barButtonHover(@fColor: @darkBarFontColor, @color: @barButtonColor, @shadowColor: darken(@mainColor,10%)){
		color: @fColor;
		background-color: @barButtonHoverColor;
	}
	.barButtonFocus(@fColor: @darkBarFontColor, @color: @barButtonColor, @shadowColor: darken(@mainColor,10%)){
		background-color: @barButtonHoverColor;
		color: @fColor;
	}
	.barButtonActive(@fColor: @darkBarFontColor, @color: @barButtonColor, @shadowColor: darken(@mainColor,10%)){
		background-color: @barButtonActiveColor;
		color: @fColor;
		.activeShadow;
	}

	background: @secondaryBg;
	border-color: @secondaryBg;

	.webix_el_button, .webix_el_label .webix_el_box, .webix_inp_label, .webix_inp_top_label, .webix_slider_title{
		color: @darkBarFontColor;
	}
	.webix_secondary, .webix_transparent{
		.webix_icon, .webix_img_btn_text, .webix_icon_btn{
			color: @darkBarFontColor;
		}
	}
	.webix_transparent button{
		color: @darkBarFontColor;
		&:hover, &:focus{
			background-color: @barButtonBgColor;
		}
		&:active{
			background-color: @barButtonHoverColor;
		}
	}
	.webix_secondary button, .webix_inp_counter_next, .webix_inp_counter_prev,
	.webix_segment_0, .webix_segment_1, .webix_segment_N, .webix_menu-x .webix_list_item{
		.barButton;
	}

	.webix_view > .webix_template{
		color: @backColor;
		background-color: @secondaryBg;
	}
	.webix_secondary button:hover, .webix_menu-x .webix_list_item:hover,
	.webix_inp_counter_next:hover, .webix_inp_counter_prev:hover,
	.webix_segment_0:hover, .webix_segment_1:hover, .webix_segment_N:hover{
		.barButtonHover;
	}
	.webix_secondary button:focus, .webix_menu-x .webix_list_item:focus,
	.webix_inp_counter_next:focus, .webix_inp_counter_prev:focus,
	.webix_segment_0:focus, .webix_segment_1:focus, .webix_segment_N:focus{
		.barButtonFocus;
	}
	.webix_secondary button:active, .webix_menu-x .webix_list_item:active,
	.webix_inp_counter_next:active, .webix_inp_counter_prev:active,
	.webix_segment_0:active, .webix_segment_1:active, .webix_segment_N:active{
		.barButtonActive;
	}
	.webix_inp_static, input[type=text], input[type=combo], input[type=datepicker],
	textarea, select, .webix_text_highlight{
		border-color: transparent;
		background-color:@barButtonBgColor;
		color:@barkBarInputColor;
	}
	.webix_el_texthighlight input, .webix_el_texthighlight textarea{
		caret-color: @barkBarInputColor;
	}
	.webix_inp_static input[type=text]{
		background-color:transparent;
	}
	select option{
		background-color: @secondaryBg;
		color: @backColor;
	}
	.webix_multicombo_value, .webix_multicombo_tag{
		color: @secondaryBg;
	}
	.webix_inp_static:focus, input[type=text]:focus, input[type=combo]:focus, input[type=datepicker]:focus,
	textarea:focus, select:focus{
		border-color: @backColor;
		box-shadow: none;
	}
	.webix_el_counter{
		button{
			background-color: rgba(0,0,0,0.3);
		}
		input[type=text]:focus{
			border-color: transparent;
		}
	}
	.webix_placeholder{
		color:@darkBarPlaceholderColor;
	}
	::-webkit-input-placeholder { color: @darkBarPlaceholderColor; }
	::-moz-placeholder { color: @darkBarPlaceholderColor; }
	:-moz-placeholder { color: @darkBarPlaceholderColor; }
	:-ms-input-placeholder { color: @darkBarPlaceholderColor; }

	.webix_input_icon{
		color: @barkBarInputColor;
	}
	.webix_selected.webix_segment_0, .webix_selected.webix_segment_1, .webix_selected.webix_segment_N{
		.buttonBackground(@formButtonColor, @formButtonFontColor);
	}
	.webix_el_icon, .webix_icon_button{
		color: @darkBarFontColor ;
	}
	.webix_control{
		border-color: @mainColor;
	}
	.webix_icon_button{
		&:hover:before{
			.darkHoverRule(@barButtonBgColor);
		}
		&:hover .webix_icon{
			opacity: 1;
		}
		.webix_icon{
			color: @darkBarFontColor;
			opacity: 0.7;
		}
	}
	.webix_custom_checkbox, .webix_custom_radio{
		color: @darkBarFontColor;
	}
	.webix_custom_checkbox:focus, .webix_custom_radio:focus{
		.radioHoverRule(@darkBarFontColor);
	}
	.webix_label_right{
		color:@darkBarFontColor;
	}
	// disabled controls
	@disabledColor: rgba(0,0,0,0.1);
	@disabledFontColor: rgba(255,255,255,0.4);
	@arrowDisablesButtonBgColor: #5b6977;
	.inputDisabled(){
		color: @disabledFontColor;
		background: @disabledColor;
		border-color: transparent;
	}
	.buttonDisabled(){
		color: @disabledFontColor;
		background: darken(@disabledColor,2%);
		text-shadow: none;
	}
	.webix_view.webix_control{
		.webix_disabled_box{
			.webix_button{
				.buttonDisabled;
			}
			.webix_img_btn_text{
				color: @disabledFontColor;
			}
		}
	}
	.webix_disabled_view.webix_control{
		.webix_icon_btn, .webix_icon {
			color: @disabledFontColor;
		}
	}
	.webix_disabled_view.webix_menu-x {
		.webix_list_item.menu{
			background-color: @disabledColor;
			color:@disabledFontColor;
		}
	}
	.webix_toolbar .webix_disabled_view.webix_control{
		.webix_icon, .webix_disabled_box .webix_img_btn_text, .webix_icon_btn{
			color: @disabledFontColor;
		}
	}
	.webix_view.webix_control .webix_disabled_box{
		label, .webix_input_icon, button{
			color: @disabledFontColor;
		}
		input, select, textarea, .webix_inp_static, .webix_inp_counter_prev, .webix_inp_counter_next{
			.inputDisabled();
		}
		.webix_inp_static input{
			background-color: transparent;
		}
		.webix_segment_0, .webix_segment_1, .webix_segment_N, .webix_item_tab{
			.buttonDisabled;
		}
	}
	.webix_disabled_top_label{
		color: @disabledFontColor;
	}

	// invalid controls
	.webix_invalid .webix_el_box input,
	.webix_invalid .webix_el_box .webix_inp_static, .webix_invalid .webix_el_box select,
	.webix_invalid .webix_el_box textarea, input.webix_invalid, select.webix_invalid, textarea.webix_invalid{
		color: tint(@dangerColor, 80%);
		background-color: fade(@dangerColor, 30%);
		border-color: tint(@dangerColor, 30%);
	}
	.webix_invalid .webix_multicombo_value, .webix_invalid .webix_multicombo_tag{
		color: @dangerColor;
	}
	.webix_invalid .webix_el_box .webix_inp_static input{
		background-color:transparent;
	}
}

//---------------------------------------------------------------//
//         Standards bars (toolbar, type header, accordion)      //
//---------------------------------------------------------------//

.layoutBarBG{
	.webix_el_label .webix_el_box{
		.barFont();
	}
	&.webix_dark{
		.layoutDarkBarBG;
	}
}

//---------------------------------------------------------------//

.webix_toolbar{
	.layoutBarBG;
}
.webix_layout_space > .webix_toolbar{
	#border > .radius(@layoutRadius);
}

.webix_view.webix_layout_accordion{
	background-color: @baseBg;
}

@accordionLeftMargin: (@barHeight - 18)/2;
@accordionTopMargin: (@barHeight - 17)/2;
.webix_accordionitem .webix_accordionitem_button{
	float:right;
	position:relative;
	height:19px;
	width:19px;
	margin: (@barHeight - 17)/2 (@barHeight - 18)/2;
}
.webix_accordionitem .webix_accordionitem_header{
	line-height: @barHeight;
	&:hover, &:focus{
		background-color: darken(@backColor, 2%);
	}
}
@inactiveBarColor:@accentBg;
@inactiveBarFontColor:@baseColor;

.webix_accordionitem.collapsed .webix_accordionitem_button{
	float:right;
	position:relative;
	margin-top: (@barHeight - 17)/2 - 1;
}


.webix_accordionitem.horizontal.collapsed, .webix_accordionitem.collapsed {
	background-color: @accentBg;
	.webix_accordionitem_header{
		background-color: @inactiveBarColor;
		color: @inactiveBarFontColor;
		.webix_accordionitem_button{
			color: @inactiveBarFontColor;
		}
		.webix_accordionitem_label .webix_icon{
			color: @inactiveBarFontColor;
		}
		&:hover, &:focus{
			background-color: darken(@inactiveBarColor, 2%);
		}
	}

}
.webix_accordionitem_label{
	padding-left: 12px;
}

.webix_layout_accordion.webix_dark{
	.webix_accordionitem_header{
		background-color: @secondaryBg;
		color: @backColor;
		.webix_accordionitem_button{
			color: @backColor;
		}
		&.collapsed{
			background-color: @accentBg;
			color: @baseColor;
			.webix_accordionitem_button{
				color: @baseColor;
			}
		}
		&:hover, &:focus{
			background-color: darken(@secondaryBg, 2%);
		}
	}
	.webix_accordionitem.horizontal.collapsed, .webix_accordionitem.collapsed{
		.webix_accordionitem_header:hover, .webix_accordionitem_header:focus{
			background-color: darken(@accentBg, 2%);
		}
	}
}
// "mdi font" arrows

.webix_accordionitem .webix_accordionitem_header{
	.webix_accordionitem_button{
		color: @inactiveFontColor;
		background-image: none;
		font-family: @iconFamily;
		font-size: 24px;
		text-align: center;
		width: 24px;
		height: @barHeight - 1;
		margin: 0 (@barHeight/2 - 12) 0 (@barHeight/2 - 12);
	}
	.webix_accordionitem_label .webix_icon{
		color: @inactiveFontColor;
	}
	.webix_accordionitem_button:before{
		content: '\F002';	//left
	}
}

.webix_accordionitem .webix_accordionitem_header.collapsed .webix_accordionitem_button:before{
	content: '\F004';	//up
}
.webix_accordionitem.horizontal:last-child > .webix_accordionitem_header .webix_accordionitem_button:before {
	content: '\F003';	//right
}
.webix_accordionitem.horizontal.collapsed:last-child > .webix_accordionitem_header .webix_accordionitem_button:before{
	content: '\F001';	//down
}
.webix_accordionitem.vertical > .webix_accordionitem_header{
	.webix_accordionitem_button{
		height: @barHeight - 1;
		margin: 0px @barHeight/2-12 0 @barHeight/2-12;
	}
	.webix_accordionitem_button:before{
		content: '\F004'; //up
	}
}
.webix_accordionitem.vertical > .webix_accordionitem_header.collapsed .webix_accordionitem_button:before{
	content: '\F001'; //down
}


//resizer
.resizerXBG(){
	#gradient > .v3(@backColor, @darkerBG, @darkestBG);
}
.resizerYBG(){
	#gradient > .h3(@backColor, @darkerBG, @darkestBG);
}


.webix_toolbar.webix_layout_subbar{
	background: transparent;
	.webix_view{
		color: @fontColor ;
	}

}

.webix_el_tabbar + .webix_multiview{
	background-color: @backColor;
}


@layoutRadius: 2px;
.webix_view.rounded_top{
	#border > .top(@layoutRadius);
}
.webix_view.rounded_right{
	#border > .right(@layoutRadius);
}
.webix_view.rounded_bottom{
	#border > .bottom(@layoutRadius);
}
.webix_view.rounded_left{
	#border > .left(@layoutRadius);
}

//*****************//
//* round borders *//
//*****************//
.webix_layout_space > .webix_view, .webix_layout_wide > .webix_view{
	#border > .radius(@layoutRadius);

}


.webix_layout_space, .webix_layout_wide{
	.webix_layout_accordion .webix_accordionitem{
		#border > .radius(@layoutRadius);
	}
}

//-------------------------------------------///
//                Window                     ///
//-------------------------------------------///

@windowRadius: 0px;

@messagePadding: 11px 12px;

.webix_popup_button{
	border-color: @buttonColor;
	&.confirm{
		border-color: @formButtonColor;
	}
	div{
		#border > .radius(0);
	}
}

//-------------------------------------------///
//                Data components            ///
//-------------------------------------------///

//data
@dataHeaderBorderColor: @borderColor;
@dataHeaderBgColor: @accentBg;
@selectBorderColor: @dataBorderColor;
@selectFontColor: @fontColor;

.dataHeaderFont{
	.fontStyle(@fontSize, 500, @altFontColor, 0.2px);
}
.selectLine(){
	color: @selectFontColor;
	background: @selectColor;
	&:focus{
		.selectFocusRule();
	}
}
.selectXLine(){
	border-bottom:1px solid @selectBorderColor;
//	border-top:1px solid @selectBorderColor;
}
.selectYLine(){
	border-left:1px solid @selectBorderColor;
	border-right:1px solid @selectBorderColor;
}

.dataHeaderBg(){
	background: @dataHeaderBgColor;
}
@dataHeaderBordersStyle: 1px solid @dataHeaderBorderColor;
.dataHeaderBorders(){
	border-right: @dataHeaderBordersStyle;
	border-bottom: @dataHeaderBordersStyle;
}

.webix_dtable{
	.webix_ss_header .webix_hcell, .webix_ss_footer .webix_hcell{
		border-color: transparent;
	}
	.webix_ss_body{
		.webix_column>div, .webix_table_cell{
			border-right-color: transparent;
			border-left-color: transparent;
		}
	}
	&.webix_header_border .webix_ss_header .webix_hcolumn > div,
	&.webix_header_border .webix_ss_header .webix_span{
		border-right-color: @dataHeaderBorderColor;
		border-bottom-color: @dataHeaderBorderColor;
	}
	&.webix_footer_border .webix_ss_footer .webix_hcolumn > div,
	&.webix_footer_border .webix_ss_footer .webix_span{
		border-right-color: @dataHeaderBorderColor;
		border-top-color: @dataHeaderBorderColor;
	}
	&.webix_data_border .webix_ss_body .webix_column>div, &.webix_data_border .webix_table_cell{
		border-right-color: @dataBorderColor;
	}
	.webix_ss_left .webix_column.webix_last>div{
		border-right: 1px solid darken(@borderColor,5%);
	}
	div.webix_last_topcell{
		border-bottom:1px solid darken(@borderColor,5%);
	}
	.webix_ss_right .webix_column.webix_first>div{
		border-left: 1px solid darken(@borderColor,5%);
	}
	.webix_hs_right .webix_hcell.webix_first {
		border-left: @dataHeaderBordersStyle;
	}
	.webix_hs_left .webix_hcell.webix_last{
		border-right: @dataHeaderBordersStyle;
	}
	.webix_hcell.webix_ss_filter {
		padding: 0px 4px;
	}
	.webix_hcell.webix_div_filter {
		padding: 1px 4px;
	}
	.webix_dtable_subview{
		background: @backColor;
		.webix_view{
			border-left-width: 1px;
			border-right-width: 1px;
			border-color: @dataBorderColor;
		}
	}
	.webix_ss_filter select, .webix_ss_filter input{
		height: @inputHeight - 2*@skin_input_y_padding;
		vertical-align: middle;
		#border > .radius(@skin_input_radius);
		border-color: @inputBorderColor;
		&:focus{
			border-color: @baseColor;
		}
	}
	.webix_select_mark > div.webix_row_select{
		box-shadow: inset 2px 0 @baseColor;
	}


	.webix_ss_header .webix_hcolumn div.webix_last_row,
	.webix_ss_header .webix_span.webix_last_row{
		border-bottom: 1px solid lighten(@baseColor, 20%);
	}
	.webix_ss_footer .webix_hcolumn > div:first-child,
	.webix_ss_footer .webix_hcell[row="0"]{
		border-top: 1px solid lighten(@baseColor, 20%);
	}

	.webix_ss_footer, .webix_ss_footer .webix_hcolumn,
	.webix_ss_footer .webix_hs_left, .webix_ss_footer .webix_hs_center, .webix_ss_footer .webix_hs_right,
	.webix_ss_footer div.webix_ss_vscroll_footer{
		.dataHeaderFont;
		.dataHeaderBg;
	}

	.webix_column >  .webix_drag_over.webix_cell{
		background-color: @accentBg;
	}
}
.webix_block_selection{
	border: none;
	background: @baseColor;
	opacity: 0.1;
}
.webix_area_selection, .webix_area_selection_handle{
	background: @baseColor;
}
.webix_dtable_focused{
	.webix_area_selection, .webix_area_selection_handle{
		.darkFocusRule(@baseColor);
	}
}

.dtBodyCell{
	border-bottom: 1px solid @dataBorderColor ;
}

.webix_dtable div.webix_ss_vscroll_header{
	border-bottom-color: lighten(@baseColor, 20%);
}
.webix_dtable div.webix_ss_vscroll_footer{
	border-top-color: lighten(@baseColor, 20%);
	border-left-color: @dataHeaderBorderColor;
}
// do not highlight borders for edited item
.webix_view .webix_dt_editor{
	input, select{
		border-color: @baseColor;
		#border > .radius(@skin_input_radius);
	}
}
@dtCheckboxMarginTop: (@rowHeight - 14)/2;

.dataItemStyle{
	border-color: @dataBorderColor ;
}

.webix_list_item.webix_group_back{
	color: @altFontColor;
	background: @alterColor;
	border-bottom: 1px solid @dataHeaderBorderColor;

}
// dataview
.webix_dataview_item{
	border-right-color: @dataBorderColor;
	line-height: 24px;
	&.webix_selected{
		box-shadow: none;
	}
}
.webix_dataview_item.tiles.webix_selected{
	border-color: lighten(@baseColor, 20%);
}

.webix_view .webix_pager_item{
	.buttonStyle;
	.buttonBackground;
}
.webix_view .webix_pager_item_selected{
	.buttonStyle;
	.buttonBackground(@formButtonColor, @formButtonFontColor);
}
.webix_view{
	.webix_pager_item,.webix_pager_item_selected{
		#border > .radius(@skin_input_radius);
		border-width: 0px;
	}
}

.webix_list .webix_unit_header{
	font-weight: normal;
	text-shadow: none;
	border-bottom: 1px solid @dataHeaderBorderColor;
	#box > .sizing;
	.dataHeaderBg();
	.dataHeaderFont();
	&:not(:first-child){
		border-top:1px solid @dataHeaderBorderColor;
		margin-top:-1px;
	}
}

@listPaddingX: 12px;
@listPaddingY:  2px;
@treeItemHeight: 24px;
@treeIconSize:	25px;
@listIconVAlign: middle;

// datatree
.webix_tree{
	.webix_tree_item.webix_selected{
		background-color: @selectColor;
		&:focus{
			background-color: darken(@selectColor, 2%);
		}
		span{
			background-color: transparent;
			padding: 0;
			margin: 0;
		}
		div{
			background-color: transparent;
		}
	}
}

.webix_tree_open, .webix_tree_close{
	background-image: none;
	font-family: @iconFamily;
	font-size: 24px;
	text-align: center;
	color: @inactiveFontColor;
}

.webix_tree_open:before{
	content: "\F027"; //open folder
}
.webix_tree_close:before{
	content: "\F028"; //close folder
}

.webix_tree_folder, .webix_tree_folder_open, .webix_tree_file{
	background-image: none;
	font-family: @iconFamily;
	font-size: 20px;
	margin: 0 4px 0 0;
	width: 24px;
	text-align: center;
	color: @borderColor;
}
.webix_tree_folder:before{
	content: "\F030";
}
.webix_tree_folder_open:before{
	content: "\F031";
}
.webix_tree_file:before{
	content: "\F032";
}

// Menu

.webix_menu-x, .webix_view.webix_menu{
	.webix_list_item .webix_submenu_icon{
		font-size: 14px;
		font-family: @iconFamily;
		width:6px;
		top:0;
		margin-left: 0;
	}
}
.xMenuItems(){
	border-color: transparent;
	background: transparent;
	color: @backColor;
	.webix_list_item{
		border-right: 1px solid #fff;
		border-left: 0px;
		background: @mainColor;
		color: #fff;
		font-size: @fontSize;
		.webix_submenu_icon:before{
			content: '\F001';
		}
		.webix_icon_btn{
			color: #fff;
			text-align: left;
		}
		&.webix_selected{
			box-shadow:none;
		}
	}
	.webix_list_item:hover, .webix_list_item:active, .webix_list_item:focus{
		.darkHoverRule(@mainColor);
	}
	.webix_list_item:first-child{
		#border > .corners(@borderRadius,0,0,@borderRadius);
	}
	.webix_list_item:last-child{
		border-right: none;
		#border > .corners(0,@borderRadius,@borderRadius,0);
	}
	.webix_list_item.webix_disabled{
		color: @disabledFontColor;
		background-color: @disabledColor;
	}
}
.webix_view.webix_popup.webix_menu{
	border: none;
}
.webix_menu.webix_view{
	.webix_list_item:hover, .webix_list_item:active{
		background-color: darken(@selectColor, 2%);
	}
	.webix_list_item{
		.webix_submenu_icon:before{
			content: '\F003';
		}
	}
	.webix_list_item.webix_selected{
		background: @selectColor;
	}
	.webix_list_item.webix_disabled{
		background-color: @backColor;
	}
	.webix_icon{
		color: @inactiveFontColor;
	}
}

//property
.webix_property{
	.webix_property_label_line{
		background-color: @dataHeaderBgColor;
	}
}

// drag-n-drop
.webix_drag_over, .webix_drop_zone{
	background-color: @accentBg;
}

//-------------------------------------------///
//                   Controls                ///
//-------------------------------------------///

@buttonColor:  @accentBg;
@buttonFontColor: @baseColor;
@optionHeight: 32px;

//Tabbar
@tabbarBorderColor:	@borderColor;
@tabbarSelectBorderColor:	#fff;
@tabBorderRadius: @layoutRadius;
@borderRadius: 2px;
@tabBorderRadius: 2px;

.webix_view button, .webix_view input[type=button]{
	-webkit-appearance: none;
}

.altBackColor(@color: @backColor) when (lightness(@color) < 50%){
	background-color: lighten(@color, 15%);
}
.altBackBorderColor(@color: @backColor) when (lightness(@color) < 50%){
	border-color: lighten(@color, 15%);
}

.inputStyle(@color: @backColor, @borderColor: @inputBorderColor){
	//background: @color;
	background: lighten(@color,8%);
	font-family: @fontFamily;

	border-color: @borderColor;
	/*.altBackColor;
	.altBackBorderColor;*/
}

.focusStyle{
	border: 1px solid @baseColor;
}

.webix_el_search, .webix_el_combo, .webix_el_colorpicker{
	input{
		padding-right: 28px;
	}
}
.webix_el_search, .webix_el_text, .webix_el_combo, .webix_el_colorpicker, .webix_el_datepicker{
	input{
		#border > .radius(@skin_input_radius);
	}
	input:focus{
		.focusStyle;
	}

}
.webix_el_richselect, .webix_el_datepicker, .webix_el_colorpicker{
	.webix_inp_static{
		#border > .radius(@skin_input_radius);
		padding-right: 28px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.webix_inp_static:focus{
		.focusStyle;
	}
}


.webix_el_textarea{
	textarea:focus{
		.focusStyle;
	}
}

.webix_el_select{
	select:focus{
		.focusStyle;
	}
}

.webix_el_select select, .webix_el_textarea textarea{
	#border > .radius(@skin_input_radius);
}

// multiselect combo
.webix_el_text .webix_inp_static{
	#border > .radius(@skin_input_radius);
	white-space: nowrap;
}
.webix_focused .webix_inp_static{
	.focusStyle;
}
.webix_multilist .wxi-checkbox-marked{
	color: @baseColor;
}
.webix_multilist .wxi-checkbox-blank{
	color: @inactiveFontColor;
}

// multicombo
.webix_multicombo_value, .webix_multicombo_tag,
.webix_multicombo_value.webix_readonly{
	background-color: @baseBg;
	#border > .radius(100px);
	padding: 0 @dataPadding 0 @dataPadding;
}
.webix_multicombo_value{
	padding: 0 26px 0 @dataPadding;
}
.webix_multicombo_delete{
	color: @inactiveFontColor;
	margin-top: -10px;
	font-size: 20px;
	height: 20px;
	&::after{
		content: "\F033";
	}
}
.webix_checksuggest_select_all{
	&:hover{
		background-color: @accentBg;
		#border > .radius(@skin_input_radius);
		.webix_label_right {
			color: @baseColor;
		}
	}
	.webix_label_right{
		text-align: center;
		font-size: @barFontSize;
		color: @baseColor;
	}
}
.webix_checksuggest_select_all.webix_el_checkbox .webix_label_right{
	padding-top:5px;
}

.buttonStyle{
	.buttonFont;
	outline: none;
}

.webix_el_colorpicker div.webix_inp_static div{
	margin: 2.5px -20px 0px -5px;
}

div.webix_inp_static,.webix_el_textarea textarea {
	.inputStyle;
}

.webix_el_select select{
	font-family: @fontFamily;
	border-color: @borderColor;
	.altBackColor;
	.altBackBorderColor;
}
.webix_el_checkbox input{
	border-color: @borderColor;
}

.webix_el_counter{
	.webix_inp_counter_value{
		width: 42px;
		.inputStyle;
	}
	.webix_inp_counter_prev, .webix_inp_counter_next{
		background: @buttonColor;
		width: 30px;
		border: 1px solid @inputBorderColor;
		font-weight: bold;
		font-family: "Courier New",Courier,monospace;
	}
	.webix_inp_counter_prev{
		font-size: 20px;
		border-right: none;
	}
	.webix_inp_counter_next{
		font-size: 20px;
		border-left: none;
	}
}


.webix_view.webix_control.webix_el_tabbar{
	background: @backColor;
}
.webix_all_tabs{
	.webix_item_tab{
		.fontStyle(@barFontSize, 500, @baseColor, 0px);
		border: none;
		&:hover{
			background-color: @selectColor;
		}
		.webix_icon.webix_tab_close{
			width: 28px;
			font-size: 20px;
			padding: 0;
			margin-top: 1px;
			color: @inactiveFontColor;
			&:focus{
		 		color: @dangerColor;
		 	}
		}
	}
	.webix_item_tab.webix_selected{
		box-shadow: inset 0 -2px @baseColor;
		padding-bottom: 0;
		&:hover{
			background-color: transparent;
		}
		&:focus{
			color: darken(@baseColor, 8%);
			box-shadow: inset 0 -2px darken(@baseColor, 8%);
		}
	}
	.webix_item_tab.webix_selected.webix_disabled{
		box-shadow: inset 0 -2px @disabledFontColor;
	}
	.webix_tab_filler{
		border: none;
	}
	.webix_tab_more_icon{
		.webix_icon{
			color: @baseColor;
		}
		&:hover, &:focus{
			background-color: @selectColor;
		}
	}
}

@tabbarBgColor: @backColor;
@selectTabBgColor: @backColor;
@selectTabFontColor: @baseColor;
@bottomTabBorderColor: @backColor;
.webixtype_bottom{
	.webix_item_tab, .webix_item_tab.webix_selected{
		background:  @tabbarBgColor;
		padding: 0;
	}
	.webix_item_tab:last-child, .webix_item_tab.webix_selected:last-child{
		border-right: none;
	}
	.webix_item_tab.webix_selected{
		box-shadow: inset 0 2px @baseColor;
		background: @selectTabBgColor ;
		color: @selectTabFontColor;
		&:focus{
			box-shadow: inset 0 2px darken(@baseColor, 8%);
		}
	}
	.webix_item_tab.webix_selected.webix_disabled{
		box-shadow: inset 0 2px @disabledFontColor;
	}
}
.webix_el_tabbar .webixtype_icon{
	.webix_img_btn{
		#box > .sizing;
		margin: 0 auto;
		text-align: center;
		.webix_icon_btn{
			color: @baseColor;
		}
	}
	.webix_img_btn{
		.webix_icon_btn{
			#box > .sizing;
			font-size: 24px;
			margin: 0 3px;
			height: 100%;
			line-height: inherit;
			vertical-align: top;
			width: 100%;
		}
	}
	.webix_item_tab.webix_selected{
		background: @selectTabBgColor;
	}
	.webix_img_btn:active, .webix_img_btn_top:active{
		background-color: @tabbarBgColor;
	}
}

.webix_accordionitem_label .webix_icon{
	margin-right: 8px;
}

.webix_el_tabbar .webixtype_iconTop,.webix_el_tabbar .webixtype_image{
	#box > .sizing;
	.webix_icon{
		color: @selectTabFontColor;
	}
	.webix_item_tab{
		font-size: @fontSize;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	.webix_img_btn_top .webix_icon, .webix_img_btn_top .webix_image{
		top:0;
	}
	.webix_img_btn_text{
		bottom: 0px;
		font-size: @fontSize;
	}
	.webix_item_tab.webix_selected{
		background: @selectTabBgColor;
		.webix_img_btn_text{
			color: @selectTabFontColor;
		}
		.webix_icon{
			color: @selectTabFontColor;
		}
		.webix_icon_btn{
			background-color: @selectTabBgColor;
		}
		.webix_img_btn{
			color: @selectTabFontColor;
		}
	}
}

.webix_el_tabbar .webixtype_icon, .webix_el_tabbar .webixtype_iconTop, .webix_el_tabbar .webixtype_image{
	.webix_item_tab{
		padding: 0;
		#border > .radius(0);
	}
	.webix_item_tab .webix_img_btn{
		color: @selectTabFontColor;
	}
}
.webix_el_tabbar .webixtype_icon, .webix_el_tabbar .webixtype_iconTop,
.webix_el_tabbar .webixtype_image, .webix_el_tabbar .webixtype_bottom{
	.webix_tab_more_icon{
		background: @tabbarBgColor;
		.webix_icon{
			color: @selectTabFontColor;
		}
		&:hover, &:focus{
			background-color: @selectColor;
		}
	}
}
.webix_el_tabbar .webixtype_icon, .webix_el_tabbar .webixtype_iconTop,
.webix_el_tabbar .webixtype_image{
	.webix_img_btn:hover, .webix_img_btn_top:hover{
		background-color: transparent;
	}
}


.webix_tab_filler:first-child{
	border-right:0;
};
.passiveBarBG{
	background: @backColor;
	color: @baseColor;
}
.activeBarBG(){
	background: @backColor;
	color: @baseColor;
}

@transparentButtonIconColor: @inactiveFontColor;
@formButtonColor: @baseColor;
@formButtonFontColor: @backColor;

.webix_remove_upload .cancel_icon{
	background-image: none;
	font-family: @iconFamily;
	font-size: 17px;
	margin: 0;
	height: auto;
	width: 20px;
	&:hover{
		color: @dangerColor;
	}
	&:before{
		content:"\F011";
	}
}
.webix_upload_error .error_icon{
	background-image: none;
	font-family: @iconFamily;
	font-size: 20px;
	height: auto;
	width: 20px;
	color: @dangerColor;
	&:before{
		content: "\F034";
	}
}

.webix_inp_counter_next:hover, .webix_inp_counter_prev:hover{
	.darkHoverRule(@buttonColor);
}
.webix_inp_counter_next:focus, .webix_inp_counter_prev:focus{
	.darkFocusRule(@buttonColor);
}
.webix_inp_counter_next:active, .webix_inp_counter_prev:active{
	.darkActiveRule(@buttonColor);
	.activeShadow;
}

// Button border
.webix_el_button button, .webix_el_toggle button,
.webixbutton, .webix_view button, .webix_view input[type=button]{
	border-width:0px;
}

// segmented button
.webix_segment_0:hover, .webix_segment_1:hover, .webix_segment_N:hover{
	.darkHoverRule(@buttonColor);
}
.webix_segment_0:focus, .webix_segment_1:focus, .webix_segment_N:focus{
	.darkFocusRule(@buttonColor);
}
.webix_segment_0:active, .webix_segment_1:active, .webix_segment_N:active{
	.darkActiveRule(@buttonColor);
	.activeShadow;
}
.webix_selected.webix_segment_0:hover, .webix_selected.webix_segment_1:hover, .webix_selected.webix_segment_N:hover{
	.darkHoverRule(@buttonFontColor);
}
.webix_selected.webix_segment_0:focus, .webix_selected.webix_segment_1:focus, .webix_selected.webix_segment_N:focus{
	.darkFocusRule(@buttonFontColor);
}
.webix_selected.webix_segment_0:active, .webix_selected.webix_segment_1:active, .webix_selected.webix_segment_N:active{
	.darkActiveRule(@buttonFontColor);
}
.webix_all_segments{

	.webix_segment_1, .webix_segment_N{
		margin-left: 1px;
		border-left: none;
	}
}
.webix_segment_0, .webix_segment_1, .webix_segment_N{
	border-color: @buttonColor;
	background-color:@buttonColor;
	color:@buttonFontColor;
	font-weight:500;
}
.segmentActive(){
	border-color: @buttonFontColor;
	background-color:@buttonFontColor;
	color:@backColor;
}

.altSliderStyle(){
	.webix_slider_left{
		border: 1px solid @inputBorderColor;
		background: @baseColor;
	}
	.webix_slider_right{
		border-color: @inputBorderColor;
	}
	.webix_slider_handle{
		background-color: @backColor;
		border: 1px solid @inputBorderColor;
		top:(@inputHeight - 18)/2;
	}
}
.sliderStyle(){
	padding-top:(@inputHeight - 8)/2;
	.webix_slider_left{
		height: 6px;
		border: 1px solid @inputBorderColor;
		background: @baseColor;
	}
	.webix_slider_right{
		height: 6px;
		border-color: @inputBorderColor;
	}
	.webix_slider_handle{
		width: 14px;
		height: 14px;
		border: 1px solid @inputBorderColor;
		background-color: @backColor;
		top:(@inputHeight - 18)/2;
	}
}

.webix_slider_vertical .webix_slider_box {
	.webix_slider_left, .webix_slider_right{
		width:6px;
	}
	.webix_slider_handle{
		left:5px;
	}
}
.webix_slider_vertical.webix_slider_alt .webix_slider_handle{
	left:3px;
}

// icon inside a button
.buttonIconStyle(){
	color: @buttonFontColor;
}
.activeShadow(@color:rgba(0,0,0,0.125)){

}

.webix_section > .webix_template{
	.fontStyle(@smallFontSize);
}

// disabled controls
@disabledColor: tint(@selectColor, 60%);
@disabledFontColor: @inactiveFontColor;
.inputDisabled(){
	color: @disabledFontColor;
	background: @disabledColor;
	border-color: @dataBorderColor;
}
.buttonDisabled(){
	color: @disabledFontColor;
	background: darken(@disabledColor,2%);
	border-color: darken(@disabledColor,2%);
	text-shadow: none;
}
.webix_view.webix_control .webix_disabled_box{
	.webix_input_icon, .webix_custom_checkbox, .webix_custom_radio{
		color: @borderColor;
	}
}
.webix_view > .webix_disabled{
	background-color: @baseBg;
	opacity: 0.6;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.webix_disabled_view .webix_disabled_top_label{
	color: @disabledFontColor;
}

@checkColor: @baseColor;
@checkSize:24px;

// checkbox
.webix_custom_checkbox:before{
	content: "\F013";
	font-family: @iconFamily;
	cursor:pointer;
}
.webix_checkbox_1 .webix_custom_checkbox:before{
	content: "\F012";
}
.webix_checkbox_1 .webix_custom_checkbox{
	color: @checkColor;
}
.webix_custom_checkbox{
	float: left;
	position: relative;
	font-size: @checkSize;
	height: 100%;
	padding: 0;
	margin-top: 1px;
	border:none;
	background-color: transparent;
	color: @inactiveFontColor;
}
.webix_custom_checkbox:focus{
	.radioHoverRule(@checkColor);
}


// radio
.webix_el_radio{
	.webix_custom_radio:before{
		font-family:@iconFamily;
		font-size:@checkSize;
		content: "\F035";
		display: block;
	}
	.webix_radio_1 .webix_custom_radio{
		color:@checkColor;
	}
	.webix_radio_1 .webix_custom_radio:before{
		content:"\F036";
	}
	.webix_custom_radio{
		padding:0;
		display: block;
		background-color: transparent;
		border-color:transparent;
		color:@inactiveFontColor;
		cursor:pointer;
	}
	.webix_custom_radio:focus{
		.radioHoverRule(@checkColor);
	}
}

//input margin
@skin_input_radius: 2px;
@skin_input_y_padding: 3px;
@skin_content_padding: 12px;
@formFontSize: @fontSize;
@iconFontColor: @inactiveFontColor;

//-------------------------------------------///
//                   Calendar                ///
//-------------------------------------------///
.webix_cal_icon, .webix_cal_time, .webix_cal_month_name{
	.fontStyle(@fontSize, 400, @fontColor);
	&:hover, &:focus{
		text-decoration: none;
		color: @baseColor;
	}
}
.webix_cal_month_name, .webix_time_header .webix_cal_hours, .webix_time_header .webix_cal_minutes{
	.fontStyle(@fontSize, 500, @altFontColor);
}
.webix_cal_month_name.webix_readonly:hover, .webix_cal_month_name.webix_readonly:focus{
	color: @altFontColor;
}
.webix_cal_prev_button, .webix_cal_next_button{
	background-image: none;
	width: 24px;
	font-size: 24px;
	font-family: @iconFamily;
	color: @inactiveFontColor;
	&:hover, &:focus{
		color: @baseColor;
	}
}
.webix_cal_prev_button:before{
	content:"\F029";
}
.webix_cal_next_button:before{
	content:"\F028";
}

.webix_time_header .webix_cal_hours, .webix_time_header .webix_cal_minutes, .webix_cal_body .webix_cal_block_empty{
	font-weight: 500;
	border-bottom: none;
}

.webix_view  > .webix_cal_header{
	height: 18px;
	div{
		height: 17px;
		line-height: 18px;
		font-size: @smallFontSize;
		border-bottom-color: transparent;
	}
}
.webix_cal_body{
	.webix_cal_week_num{
		color: @fontColor;
	}
	.webix_cal_today .webix_cal_day_inner{
		box-shadow: inset 0 0 0 1px @baseColor;
	}
	.webix_cal_day_inner{
		display:inline-block;
		font-size: @smallFontSize;
		#border > .radius(50%);
		&:hover{
			background-color: @accentBg;
		}
	}

	.webix_cal_event{
		font-weight: 500;
		color: @baseColor;
	}

	.webix_cal_outside{
		color: @inactiveFontColor;
		font-weight: normal;
	}

	.webix_cal_select, .webix_cal_today.webix_cal_select{
		background-color: transparent;
		.webix_cal_day_inner{
			color: @backColor;
			background-color: @baseColor;
			&:hover{
				background-color: @baseColor;
			}
		}
		&:focus .webix_cal_day_inner{
			.darkFocusRule(@baseColor);
		}
	}

	.webix_cal_block{
		.fontStyle(@smallFontSize);
		&.webix_selected{
			background-color: transparent;
			span{
				background-color: @baseColor;
				color: @backColor;
				&:hover{
					background-color: @baseColor;
				}
			}
			&:focus span{
				.darkFocusRule(@baseColor);
			}
		}
		span{
			#border > .radius(50%);
			&:hover{
				background-color: @selectColor;
			}
		}
	}

	.webix_hours .webix_cal_day_disabled, .webix_hours .webix_cal_day_disabled.webix_cal_event,
	.webix_minutes .webix_cal_day_disabled, .webix_minutes .webix_cal_day_disabled.webix_cal_event,
	.webix_cal_day_disabled, .webix_cal_day_disabled.webix_cal_event{
		background-color: @disabledColor;
		color: @disabledFontColor;
		span:hover{
			background-color: transparent;
		}
	}
}

//Daterange
.webix_cal_body{
	.webix_cal_range_first, .webix_cal_range_last{
		position: relative;
	}
	.webix_cal_range_last + .webix_cal_outside{
		background-color: @backColor;
	}
	.webix_cal_range_first:before, .webix_cal_range_last:after{
		content:"";
		display: block;
		width: 50%;
		height: 100%;
		position: absolute;
		top:0;
		background: lighten(@baseColor, 50%);
	}
	.webix_cal_range_first:before{
		right:100%;
	}
	.webix_cal_range_last:after{
		left:100%;
	}
	.webix_cal_range_start, .webix_cal_range_end{
		position: relative;
		z-index: 1;
	}
	.webix_cal_range_last + .webix_cal_outside{
		position: relative;
		z-index: 1;
		background-color: @backColor;
	}
	.webix_cal_range:first-child:before , .webix_cal_range:last-child:after,
	.webix_cal_outside + .webix_cal_range_first:before{
		width:0;
	}

	.webix_cal_range_start, .webix_cal_range_end, .webix_cal_today.webix_cal_range_start, .webix_cal_today.webix_cal_range_end{
		background-color: transparent;
		.webix_cal_day_inner{
			color: @backColor;
			background-color: @baseColor;
		}
	}
	.webix_cal_range{
		background-color:lighten(@baseColor, 50%);
	}
}
.webix_daterange .webix_range_timepicker .webix_cal_time{
	padding:4px;
}
.webix_daterange .webix_cal_icons .webix_cal_icon{
	border-top:none;
}

// Progress
.webix_progress_top .webix_progress_state, .webix_progress_bottom .webix_progress_state{
	background: @baseColor;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%,
	transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%,
	transparent 75%, transparent);
}
.webix_progress_top .webix_progress_state{
	background-size: 10px 10px;
}
.webix_progress_bottom .webix_progress_state{
	background-size: 14px 14px;
}

//switch
.webix_switch_box{
	color: @fontColor;
	background-color: @accentBg;
	&.webix_switch_on{
		background-color: @baseColor;
	}
	.webix_switch_text{
		padding-top: 2px;
	}
}

//sidebar
.webix_sidebar{
	background-color: @backColor;
	.webix_tree_item:hover{
		background-color: darken(@selectColor, 2%);
	}
	&.webix_sidebar_left{
		.webix_tree_item.webix_sidebar_selected + .webix_tree_leaves .webix_tree_item,
		.webix_tree_item.webix_selected, .webix_tree_item.webix_sidebar_selected{
			box-shadow: inset 2px 0 @baseColor;
		}
	}
	&.webix_sidebar_right{
		.webix_tree_item.webix_sidebar_selected + .webix_tree_leaves .webix_tree_item,
		.webix_tree_item.webix_selected, .webix_tree_item.webix_sidebar_selected{
			box-shadow: inset -2px 0 @baseColor;
		}
	}
	.webix_tree_branch_1{
		border: none;
		.webix_tree_item{
			padding-right: 12px;
		}
		& > .webix_tree_item{
			padding-left: 12px;
		}
	}
	.webix_tree_item.webix_selected .webix_sidebar_icon, .webix_tree_item .webix_sidebar_icon{
		margin-right: 8px;
	}
	.webix_sidebar_icon{
		width: 20px;
		vertical-align: middle;
	}
	.webix_sidebar_icon, .webix_sidebar_dir_icon{
		color: @inactiveFontColor;
		font-size: 20px;
	}
	.webix_tree_item, .webix_tree_branch_1>.webix_tree_item{
		color: @fontColor;
		cursor: pointer;
	}
	.webix_tree_item.webix_selected, .webix_tree_item.webix_sidebar_selected{
		color: @baseColor;
		background-color: @selectColor;
		font-weight: 500;
		.webix_sidebar_icon, .webix_sidebar_dir_icon{
			color: @baseColor;
		}
	}
	.webix_tree_item.webix_selected{
		span{
			background-color:transparent;
			color: @baseColor;
		}
	}
	&.webix_sidebar_expanded .webix_tree_item.webix_sidebar_selected{
		background-color:transparent;
		&:hover{
			background-color: darken(@selectColor, 2%);
		}
	}
}

.webix_sidebar_popup_list{
	.webix_list_item, .webix_list_item:first-child{
		border-width: 0px;
	}
	.webix_list_item.webix_sidebar_selected{
		background-color: @selectColor;
		color: @baseColor;
		font-weight: 500;
		&:hover{
			background-color: @selectColor !important;
		}
	}
	.webix_list_item.webix_selected{
		color: @baseColor;
		font-weight: 500;
	}
	.webix_tree_branch_1>.webix_tree_item{
		height: @barHeight;
		line-height: @barHeight;
	}
}

.webix_sidebar_popup_left{
	.webix_list_item.webix_selected, .webix_list_item.webix_sidebar_selected{
		box-shadow: inset 2px 0 @baseColor;
	}
}

.webix_sidebar_popup_right{
	.webix_list_item.webix_selected, .webix_list_item.webix_sidebar_selected{
		box-shadow: inset -2px 0 @baseColor;
	}
}
.webix_sidebar_popup_list.webix_sidebar_popup_right .webix_icon{
	margin-left: -8px;
}

.webix_sidebar_popup{
	&.webix_sidebar_popup_left, &.webix_sidebar_popup_right{
		box-shadow: @mediumShadow;
	}
	&.webix_sidebar_popup_right .webix_sidebar_popup_right{
		box-shadow: none;
	}
	.webix_sidebar_popup_title{
		background-color: @selectColor;
		.webix_template{
			border: none;
			line-height: @barHeight;
		}
		&.webix_selected{
			color: @baseColor;
			font-weight: 500;
		}
	}
}
.webix_sidebar_popup_right{
	box-shadow: @mediumShadow;
}

//inverted sidebar
.webix_sidebar.webix_dark{
	border-color: @secondaryAccentBg;
	background-color: @secondaryAccentBg;
	.webix_tree_item{
		color:@backColor;
		&:hover{
			background-color:darken(@secondaryAccentBg, 10%);
		}
	}
	.webix_tree_item.webix_selected, .webix_tree_item.webix_sidebar_selected{
		color: @baseColor;
		background-color:darken(@secondaryAccentBg, 8%);
	}
	&.webix_sidebar_expanded .webix_tree_item.webix_sidebar_selected{
		background-color:transparent;
		&:hover{
			background-color: darken(@secondaryAccentBg, 10%);
		}
	}
}
.webix_sidebar_popup.webix_dark{
	.webix_sidebar_popup_title{
		background-color: darken(@secondaryAccentBg, 8%);
		.webix_template{
			border-color: darken(@secondaryAccentBg, 8%);
			color: @backColor;
		}
		&.webix_selected .webix_template{
			color: @baseColor;
		}
	}
}

.webix_sidebar_popup_list.webix_dark{
	background-color: @secondaryAccentBg;
	border-color: darken(@secondaryAccentBg, 8%);
	.webix_list_item{
		background: @secondaryAccentBg;
		color: @backColor;
		border-color: darken(@secondaryAccentBg, 8%);
		&.webix_selected, &.webix_sidebar_selected{
			background-color: darken(@secondaryAccentBg, 8%);
			color: @baseColor;
		}
		&:hover{
			background-color: darken(@secondaryAccentBg, 10%);
		}
		&.webix_selected{
			background-color: darken(@secondaryAccentBg, 8%);
		}
		&.webix_sidebar_selected:hover{
			background-color: darken(@secondaryAccentBg, 8%) !important;
		}
	}
}

.webix_sidebar_popup.webix_dark{
	border-color: darken(@secondaryAccentBg, 8%);
}

.webix_list_item{
	&.webix_selected{
		box-shadow: inset 2px 0 @baseColor;
	}
	&.webix_disabled{
		color: @inactiveFontColor;
	}
	&.webix_selected.webix_disabled{
		box-shadow: inset 2px 0 @inactiveFontColor;
	}
	.webix_icon{
		font-size: 20px;
	}
}
.webix_list-x .webix_list_item.webix_selected{
	box-shadow: none;
	border-left: none;
	padding-left: 12px;
}
.webix_header > div{
	padding-left: 12px;
}

// Icons
.webix_icon, .webix_icon_btn, .webix_input_icon {
	font-family: @iconFamily;
}

.webix_icon_button{
	position: relative;
	z-index: 0;
	&:before{
		content: '';
		opacity: 0;
		position: absolute;
		transition-duration: .15s;
		transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);
		z-index: -1;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
		#border > .radius(50%);
		transform: scale(0);
		transition-property: transform, opacity;
	}
	&:hover .webix_icon{
		color: @fontColor;
	}
	&:hover:before{
		background-color: @selectColor;
		opacity: 1;
		transform: scale(1);
	}
}

.webix_icon_btn, .webix_input_icon{
	width: 20px;
}
.webix_img_btn_top .webix_icon{
	color: @inactiveFontColor;
}
.webix_icon_btn{
	vertical-align: text-bottom;
}

//shadow
@smallShadow: 0 2px 6px 0 rgba(0,0,0,0.1);
@mediumShadow: 0 3px 10px 0 rgba(0,0,0,0.1), 0 1px 7px 0 rgba(0,0,0,0.1);
@bigShadow: 0 1px 14px 0 rgba(0,0,0,0.12), 0 4px 10px 0 rgba(0,0,0,0.1);

.webix_resize_frame{
	box-shadow: 0 2px 6px 0 #000, 0 1px 4px 0 #000;
}
.webix_tooltip{
	padding: 4px 8px;
	background-color: @fontColor;
	color: @backColor;
	font-weight: 500;
	line-height: 20px;
	#border > .radius(@skin_input_radius);
	border: none;
}
.portlet_marker, .portlet_markertop, .portlet_markerbottom, .portlet_markerleft, .portlet_markerright{
	background: @baseColor;
}
.webix_treemap_item{
	&:hover{
		box-shadow: inset 0 0 0 1px lighten(@baseColor, 20%);
	}
	&.webix_selected{
		border-color: inherit;
		box-shadow: inset 0 0 0 2px @baseColor;
	}
}
// input labels

.webixlabel{
	font-weight: @boldStyle;
}

.webixtoolbarlabel{
	letter-spacing:0;
}

.webix_inp_label, .webix_inp_top_label, legend.webix_forminput_label, .webix_el_label .webix_el_box{
	.fontStyle(@fontSize, 500, @altFontColor);
}
.webix_inp_label, .webix_forminput_label{
	padding-right: 8px;
}
.webix_label_right{
	padding-left: 4px;
}
.webix_el_checkbox .webix_label_right{
	display: block;
}

@placeholderColor: @inactiveFontColor;

//richtext
.webix_richtext{
	.webix_richtext_container{
		box-shadow: inset 0 1px @borderColor;
	}
}

// dbllist
@dblistSelColor: @fontColor;
@dblistButtonBg: @buttonColor;

.webix_dbllist{
	.bottom_label{
		.fontStyle(@fontSize, 400, @inactiveFontColor);
	}
}

// sidemenu
.webix_popup.webix_sidemenu{
	&.webix_sidemenu_left, &.webix_sidemenu_right, &.webix_sidemenu_top, &.webix_sidemenu_bottom{
		border: none;
		box-shadow: @smallShadow;
	}
}

//organogram
.webix_organogram{
	.webix_organogram_item{
		background: @accentBg;
		border-color: @inputBorderColor;
		#border > .radius(@skin_input_radius);
		&.webix_selected{
			border-color: @baseColor;
			background: tint(@baseColor, 90%);
		}
	}
}

//chart
.webix_chart{
	.webix_chart_legend_item, .webix_canvas_text, .webix_axis_title_x, .webix_axis_title_y{
		.fontStyle(@smallFontSize);
	}
	.webix_canvas_text.webix_axis_item_x, .webix_canvas_text.webix_axis_item_y,
	.webix_axis_title_x, .webix_axis_title_y, .webix_canvas_text.webix_axis_radar_title{
		color: @inactiveFontColor;
	}
}

//pdf viewer
.webix_toolbar.pdf_bar {
    background-color: #474747;
    .webix_icon_btn {
    	font-size: 20px;
    	vertical-align: middle;
	}
	.webix_img_btn:focus, .webix_img_btn:hover{
		background-color:darken(@pdfBG, 5%);
	}
}

//invalid inputs and data
.invalidStyle{
	color: @dangerColor;
	background-color: tint(@dangerColor, 80%);
}
.webix_list_item.webix_invalid, .webix_tree_item.webix_invalid,
.webix_dataview_item.webix_invalid, .webix_cell.webix_invalid{
	.invalidStyle;
}
.webix_invalid .webix_el_box input,
.webix_invalid .webix_el_box .webix_inp_static, .webix_invalid .webix_el_box select,
.webix_invalid .webix_el_box textarea, input.webix_invalid, select.webix_invalid, textarea.webix_invalid {
	.invalidStyle;
	border-color:tint(@dangerColor, 30%);
}
.webix_invalid .webix_inp_bottom_label {
	color: @dangerColor;
}

//carousel
@navItemWidth: 14px;
@navItemHeight: 14px;
@navItemBorderWidth: 2px;

.webix_nav_panel{
	.webix_nav_item{
		background-color: transparent;
		border-color: rgba(255,255,255, 0.4);
		filter:alpha(opacity=100);
		opacity: 1;
		&:hover{
			border-color: rgba(255,255,255, 0.6);
		}
	}
	.webix_nav_active{
		background-color: @backColor;
	}
}

@navButtonWidth: 32px;
@navButtonHeight: 32px;
@sideNavButtonWidth: 56px;
@sideNavButtonHeight: 86px;
.webix_nav_button_prev .webix_nav_button_inner, .webix_nav_button_next .webix_nav_button_inner{
	opacity: 1;
	background-image:none;
	text-align: center;
	font-family: @iconFamily;
	font-size: 24px;
	color: @backColor;
	#border > .radius(50%);
	&:hover, &:focus{
		background-color: rgba(0,0,0,0.2);
		transition: 0.15s;
	}
}
.webix_nav_button_side.webix_nav_button_prev .webix_nav_button_inner, .webix_nav_button_side.webix_nav_button_next .webix_nav_button_inner{
	opacity: 1;
	text-align: center;
	font-family: @iconFamily;
	font-size: 48px;
	color: @backColor;
	background: rgba(0,0,0,0.2);
	#border > .radius(@skin_input_radius);
	&:hover, &:focus{
		background: rgba(0,0,0,0.4);
	}
}
.webix_nav_button_side.webix_nav_button_next{
	right: 0;
}
.webix_nav_button_side.webix_nav_button_prev{
	left: 0;
}
.webix_nav_button_prev .webix_nav_button_inner:before{
	content:"\F002";
}
.webix_nav_button_next .webix_nav_button_inner:before{
	content:"\F003";
}

.webix_dark{
	.webix_nav_item{
		border-color: rgba(0,0,0,0.4);
		&:hover{
			border-color: rgba(0,0,0,0.6);
		}
	}
	.webix_nav_inactive {
		background-color: transparent;
	}
	.webix_nav_active {
		background-color: #000000;
		&:hover, &:focus{
			box-shadow:0 0 @navItemPadding #000;
		}
	}
	.webix_nav_button_prev .webix_nav_button_inner, .webix_nav_button_next .webix_nav_button_inner{
		background-image: none;
		color: @altFontColor;
		&:hover, &:focus{
			background-color: rgba(255,255,255,0.2);
		}
	}
	.webix_nav_button_side.webix_nav_button_prev .webix_nav_button_inner, .webix_nav_button_side.webix_nav_button_next .webix_nav_button_inner{
		background: rgba(255,255,255,0.2);
		&:hover, &:focus{
			background: rgba(255,255,255,0.4);
		}
	}
}

//for skin autodetection
.webix_skin_mark{
	height: 240px;
}